<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Promise 对象 | 20秒的勇气</title>
    <meta name="generator" content="VuePress 1.5.3">
    <script>var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?01611e9c2d4c65531fe791d0a83e6ebd";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
      })()</script>
    <meta name="description" content="欢迎来到wenbintian的博客">
    <link rel="preload" href="/blog/assets/css/0.styles.5dc057b1.css" as="style"><link rel="preload" href="/blog/assets/js/app.2a047d56.js" as="script"><link rel="preload" href="/blog/assets/js/2.cc145974.js" as="script"><link rel="preload" href="/blog/assets/js/19.1433c5a8.js" as="script"><link rel="prefetch" href="/blog/assets/js/10.dc9f6a74.js"><link rel="prefetch" href="/blog/assets/js/11.f7ecaf96.js"><link rel="prefetch" href="/blog/assets/js/12.4363725a.js"><link rel="prefetch" href="/blog/assets/js/13.0fd4b251.js"><link rel="prefetch" href="/blog/assets/js/14.edc7bd5f.js"><link rel="prefetch" href="/blog/assets/js/15.647c0964.js"><link rel="prefetch" href="/blog/assets/js/16.2e8857c5.js"><link rel="prefetch" href="/blog/assets/js/17.1c7cc9ee.js"><link rel="prefetch" href="/blog/assets/js/18.bf88a22d.js"><link rel="prefetch" href="/blog/assets/js/20.713720d3.js"><link rel="prefetch" href="/blog/assets/js/21.51a3d47b.js"><link rel="prefetch" href="/blog/assets/js/22.04488762.js"><link rel="prefetch" href="/blog/assets/js/23.b9337410.js"><link rel="prefetch" href="/blog/assets/js/24.d0d5b562.js"><link rel="prefetch" href="/blog/assets/js/25.e76a54ef.js"><link rel="prefetch" href="/blog/assets/js/26.006d0afa.js"><link rel="prefetch" href="/blog/assets/js/27.38ec3468.js"><link rel="prefetch" href="/blog/assets/js/28.c8cf7077.js"><link rel="prefetch" href="/blog/assets/js/29.70f03487.js"><link rel="prefetch" href="/blog/assets/js/3.9bfe5560.js"><link rel="prefetch" href="/blog/assets/js/30.3e6d6ba9.js"><link rel="prefetch" href="/blog/assets/js/31.1dbd85cb.js"><link rel="prefetch" href="/blog/assets/js/32.208e4272.js"><link rel="prefetch" href="/blog/assets/js/33.979228dd.js"><link rel="prefetch" href="/blog/assets/js/34.6ad6fae2.js"><link rel="prefetch" href="/blog/assets/js/35.59b3e591.js"><link rel="prefetch" href="/blog/assets/js/36.7239d917.js"><link rel="prefetch" href="/blog/assets/js/37.a8305f70.js"><link rel="prefetch" href="/blog/assets/js/38.7e3197cd.js"><link rel="prefetch" href="/blog/assets/js/39.1bb3ad3b.js"><link rel="prefetch" href="/blog/assets/js/4.3b6a7e49.js"><link rel="prefetch" href="/blog/assets/js/40.bc263e99.js"><link rel="prefetch" href="/blog/assets/js/41.4ee25f6a.js"><link rel="prefetch" href="/blog/assets/js/42.37c6cc26.js"><link rel="prefetch" href="/blog/assets/js/43.9a40d780.js"><link rel="prefetch" href="/blog/assets/js/44.2eda0bb6.js"><link rel="prefetch" href="/blog/assets/js/45.ce3372d9.js"><link rel="prefetch" href="/blog/assets/js/46.17e44796.js"><link rel="prefetch" href="/blog/assets/js/47.f845ed6d.js"><link rel="prefetch" href="/blog/assets/js/5.bc6e1aa4.js"><link rel="prefetch" href="/blog/assets/js/6.e0f80af7.js"><link rel="prefetch" href="/blog/assets/js/7.c808e2d2.js"><link rel="prefetch" href="/blog/assets/js/8.902b76dc.js"><link rel="prefetch" href="/blog/assets/js/9.9bb8a7fe.js">
    <link rel="stylesheet" href="/blog/assets/css/0.styles.5dc057b1.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/blog/" class="home-link router-link-active"><!----> <span class="site-name">20秒的勇气</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/blog/knowledge/" class="nav-link router-link-active">
  知识篇
</a></div><div class="nav-item"><a href="/blog/notes/" class="nav-link">
  随身笔记
</a></div> <a href="https://github.com/wenbintian" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/blog/knowledge/" class="nav-link router-link-active">
  知识篇
</a></div><div class="nav-item"><a href="/blog/notes/" class="nav-link">
  随身笔记
</a></div> <a href="https://github.com/wenbintian" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><a href="/blog/knowledge/book/" class="sidebar-heading clickable"><span>读书篇</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/blog/knowledge/tool/" class="sidebar-heading clickable"><span>工具篇</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/blog/knowledge/css/" class="sidebar-heading clickable"><span>CSS篇</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/blog/knowledge/js/" class="sidebar-heading clickable router-link-active open"><span>JS篇</span> <span class="arrow down"></span></a> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group collapsable is-sub-group depth-1"><a href="/blog/knowledge/js/es6/" class="sidebar-heading clickable router-link-active open"><span>ES6</span> <span class="arrow down"></span></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/blog/knowledge/js/es6/promise.html" aria-current="page" class="active sidebar-link">Promise 对象</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/knowledge/js/es6/promise.html#_1-promise-的含义" class="sidebar-link">1.Promise 的含义</a></li><li class="sidebar-sub-header"><a href="/blog/knowledge/js/es6/promise.html#_2-promise基本用法" class="sidebar-link">2.Promise基本用法</a></li><li class="sidebar-sub-header"><a href="/blog/knowledge/js/es6/promise.html#_3-promise-prototype-then" class="sidebar-link">3.Promise.prototype.then()</a></li><li class="sidebar-sub-header"><a href="/blog/knowledge/js/es6/promise.html#_4-promise-prototype-catch" class="sidebar-link">4.Promise.prototype.catch()</a></li><li class="sidebar-sub-header"><a href="/blog/knowledge/js/es6/promise.html#_5-promise-prototype-finally" class="sidebar-link">5.Promise.prototype.finally()</a></li><li class="sidebar-sub-header"><a href="/blog/knowledge/js/es6/promise.html#_5-promise-all" class="sidebar-link">5.Promise.all()</a></li><li class="sidebar-sub-header"><a href="/blog/knowledge/js/es6/promise.html#_6-promise-race" class="sidebar-link">6.Promise.race()</a></li><li class="sidebar-sub-header"><a href="/blog/knowledge/js/es6/promise.html#_7-promise-allsettled" class="sidebar-link">7.Promise.allSettled()</a></li><li class="sidebar-sub-header"><a href="/blog/knowledge/js/es6/promise.html#_8-promise-resolve" class="sidebar-link">8.Promise.resolve()</a></li><li class="sidebar-sub-header"><a href="/blog/knowledge/js/es6/promise.html#_8-promise-resolve-2" class="sidebar-link">8.Promise.resolve()</a></li><li class="sidebar-sub-header"><a href="/blog/knowledge/js/es6/promise.html#_9-promise-any-提案" class="sidebar-link">9.Promise.any().(提案)</a></li></ul></li><li><a href="/blog/knowledge/js/es6/generator.html" class="sidebar-link">Generator 函数</a></li><li><a href="/blog/knowledge/js/es6/proxy.html" class="sidebar-link">Proxy 对象</a></li><li><a href="/blog/knowledge/js/es6/reflect.html" class="sidebar-link">Reflect 对象</a></li><li><a href="/blog/knowledge/js/es6/iterator.html" class="sidebar-link">Iterator(遍历器)</a></li><li><a href="/blog/knowledge/js/es6/map.html" class="sidebar-link">Map 对象</a></li></ul></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><a href="/blog/knowledge/js/vue/" class="sidebar-heading clickable"><span>VUE</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><a href="/blog/knowledge/js/other/" class="sidebar-heading clickable"><span>其他</span> <span class="arrow right"></span></a> <!----></section></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="promise-对象"><a href="#promise-对象" class="header-anchor">#</a> Promise 对象</h1> <h2 id="_1-promise-的含义"><a href="#_1-promise-的含义" class="header-anchor">#</a> 1.Promise 的含义</h2> <ul><li>Promise 是异步编程的一种解决方案，避免层层嵌套的回调函数。</li> <li>Promise 是一个对象，用它来获取异步操作的消息。Promise 提供了统一的 API，可以对异步操作的结果做进一步的处理。
<strong>Promise对象的两个特点</strong></li> <li>对象的状态不受外界影响。有三种状态，<code>pending</code>(进行中)、<code>fulfilled</code>(已成功)和<code>rejected</code>(已失败)。</li> <li>一旦状态改变，就不会再变。<code>Promise</code>对象状态的改变只有两种可能：从<code>pending</code>变成<code>fulfilled</code>和从<code>pending</code>变成<code>rejected</code>。只要这两种情况发生了，那么状态就<code>resolved</code>(已定型)，一直保持这个结果。
<strong>Promise对象的一些缺点</strong></li> <li><code>Promise</code>一旦新建，就无法中途取消。</li> <li>如果不设置<code>Promise</code>的<code>catch</code>方法，<code>Promise</code>内部抛出错误，不会反应到外部。</li> <li>当处于<code>pending</code>状态时，无法得知进展到哪个阶段。</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 内部报错，外部捕获不到</span>
<span class="token keyword">try</span> <span class="token punctuation">{</span>
  <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>w<span class="token punctuation">)</span> <span class="token comment">// 此处报错</span>
    <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span> <span class="token keyword">catch</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'error'</span><span class="token punctuation">,</span> e<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// Uncaught (in promise) ReferenceError: w is not defined</span>

<span class="token comment">// 使用catch方法就可以捕获</span>
<span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>w<span class="token punctuation">)</span> <span class="token comment">// 此处报错</span>
  <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>

  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'2'</span><span class="token punctuation">,</span> e<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 2 ReferenceError: w is not defined</span>
</code></pre></div><h2 id="_2-promise基本用法"><a href="#_2-promise基本用法" class="header-anchor">#</a> 2.Promise基本用法</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code>
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token parameter">_</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span>
<span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token comment">// 此处报错</span>
  <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">value</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span>

<span class="token comment">// 2 4 5 3 1</span>
</code></pre></div><ul><li><code>Promise</code>构造函数接受一个函数作为一个参数，该函数有两个参数<code>resolve</code>和<code>reject</code>。<code>resolve</code>函数作用是将<code>Promise</code>对象的状态从<code>pending</code>变为<code>fulfilled</code>。<code>reject</code>函数作用是将<code>Promise</code>对象的状态从<code>pending</code>变为<code>rejected</code>。</li></ul> <p><strong>return语句才会阻止后面的执行</strong></p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
  <span class="token comment">// 后面语句不会执行</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">value</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 1</span>
</code></pre></div><h2 id="_3-promise-prototype-then"><a href="#_3-promise-prototype-then" class="header-anchor">#</a> 3.Promise.prototype.then()</h2> <ul><li>第一个参数是<code>resolved</code>状态的回调函数。</li> <li>第二个参数是<code>rejected</code>状态的回调函数（可选）。</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">value</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token parameter">reason</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>reason<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 1</span>
</code></pre></div><ul><li><code>then</code>方法返回的是一个新的<code>Promise</code>实例，因此可以采用链式写法。</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">value</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">v</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// 前一个then没有返回值 所以 undefined</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span>
  <span class="token keyword">return</span> <span class="token number">2</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">v</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// 前一个then返回2 所以输出 2</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span>
  <span class="token keyword">let</span> <span class="token constant">P2</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">r<span class="token punctuation">,</span> j</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">r</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token keyword">return</span> <span class="token constant">P2</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">v</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// 当前then等待的是P2状态的改变的</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 1 undefined 2 3</span>
</code></pre></div><h2 id="_4-promise-prototype-catch"><a href="#_4-promise-prototype-catch" class="header-anchor">#</a> 4.Promise.prototype.catch()</h2> <ul><li>运行中抛出错误，也会被<code>catch</code>方法捕获（<code>throw new Error()</code>）。</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
promise<span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Error: test</span>

<span class="token keyword">var</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>www<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
promise<span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'2'</span><span class="token punctuation">,</span> error<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 2 ReferenceError: www is not defined</span>
</code></pre></div><ul><li>上面的写法等价于</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 写法一</span>
<span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">try</span> <span class="token punctuation">{</span>
    <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">catch</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">reject</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 写法二</span>
<span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">reject</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="_5-promise-prototype-finally"><a href="#_5-promise-prototype-finally" class="header-anchor">#</a> 5.Promise.prototype.finally()</h2> <ul><li>不管<code>Promise</code>对象最后状态如何，都会执行<code>finally()</code>方法()。</li> <li><code>finally</code>方法的回调函数不接受任何参数。</li> <li><code>finally</code>方法的实现方式。</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token class-name">Promise</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">finally</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> <span class="token constant">P</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>constructor<span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>
    <span class="token parameter">value</span>  <span class="token operator">=&gt;</span> <span class="token constant">P</span><span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> value<span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token parameter">reason</span> <span class="token operator">=&gt;</span> <span class="token constant">P</span><span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token keyword">throw</span> reason <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="_5-promise-all"><a href="#_5-promise-all" class="header-anchor">#</a> 5.Promise.all()</h2> <ul><li><code>Promise.all()</code>方法用于将多个<code>Promise</code>实例，包装成一个新的<code>Promise</code>实例.</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> p <span class="token operator">=</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>p1<span class="token punctuation">,</span> p2<span class="token punctuation">,</span> p3<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li><code>p</code>的状态由<code>p1</code>、<code>p2</code>、<code>p3</code>决定，分成两种情况
<ol><li>只有<code>p1</code>、<code>p2</code>、<code>p3</code>状态都变成<code>fulfilled</code>,<code>p</code>状态就变成<code>fulfilled</code>,此时<code>p1</code>、<code>p2</code>、<code>p3</code>的返回值组成一个数组，传递给<code>p</code>的回调函数。</li> <li>只要<code>p1</code>、<code>p2</code>、<code>p3</code>之中有一个状态都变成<code>rejected</code>,则<code>p</code>状态就变成<code>rejected</code>,此时<code>rejected</code>的返回值，传递给<code>p</code>的回调函数。</li></ol></li></ul> <h2 id="_6-promise-race"><a href="#_6-promise-race" class="header-anchor">#</a> 6.Promise.race()</h2> <ul><li><code>Promise.race()</code>方法的参数使用跟<code>Promise.all()</code>方法时一样的。</li> <li>只要<code>p1</code>、<code>p2</code>、<code>p3</code>之中有一个实例率先改变了状态，,则<code>p</code>的状态就跟着变。此时率先改变的实例的返回值，传递给<code>p</code>的回调函数。</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> p <span class="token operator">=</span> Promise<span class="token punctuation">.</span><span class="token function">race</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
  <span class="token function">getPost</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">reject</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'request timeout'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">5000</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

p
<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>log<span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>上面代码中，如果<code>5</code>秒之内<code>getPost</code>方法无法返回结果，变量<code>p</code>的状态就会变为<code>rejected</code>，从而触发<code>catch</code>方法指定的回调函数。</li></ul> <h2 id="_7-promise-allsettled"><a href="#_7-promise-allsettled" class="header-anchor">#</a> 7.Promise.allSettled()</h2> <ul><li><code>Promise.allSettled()</code>方法的参数使用跟<code>Promise.all()</code>方法时一样的。</li> <li>只有<code>p1</code>、<code>p2</code>、<code>p3</code>状态都都发生了改变,此时<code>p1</code>、<code>p2</code>、<code>p3</code>的实例组成一个数组，传递给<code>p</code>的回调函数。</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> resolved <span class="token operator">=</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token number">42</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> rejected <span class="token operator">=</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> allSettledPromise <span class="token operator">=</span> Promise<span class="token punctuation">.</span><span class="token function">allSettled</span><span class="token punctuation">(</span><span class="token punctuation">[</span>resolved<span class="token punctuation">,</span> rejected<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

allSettledPromise<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">results</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>results<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// [</span>
<span class="token comment">//    { status: 'fulfilled', value: 42 },</span>
<span class="token comment">//    { status: 'rejected', reason: -1 }</span>
<span class="token comment">// ]</span>
</code></pre></div><h2 id="_8-promise-resolve"><a href="#_8-promise-resolve" class="header-anchor">#</a> 8.Promise.resolve()</h2> <ul><li>将现有的对象转为<code>Promise</code>对象。</li> <li>参数有一下四种情况
<ol><li>参数是一个<code>Promise</code>实例
<ul><li>不做修改，直接返回当前这个实例</li></ul></li> <li>参数是一个<code>thenable</code>对象（具有<code>then</code>方法的对象）
<ul><li>会立即执行<code>then</code>方法</li></ul></li> <li>参数不具有<code>then</code>方法，或者不是一个对象
<ul><li>会把这个参数传给回调函数</li></ul></li> <li>不带参数
<ul><li>会把这个参数（undefined）传给回调函数</li></ul></li></ol></li></ul> <h2 id="_8-promise-resolve-2"><a href="#_8-promise-resolve-2" class="header-anchor">#</a> 8.Promise.resolve()</h2> <ul><li>将<code>Promise.reject(reason)</code>方法也会返回一个新的<code>Promise</code>实例，该实例的状态为<code>rejected</code>.</li> <li><code>Promise.reject()</code>方法的参数，会原封不动地作为<code>reject</code>的理由，变成后续方法的参数（这是与<code>Promise.resolve</code>的不同之处）。</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> thenable <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">'出错了'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>thenable<span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e <span class="token operator">===</span> thenable<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// true</span>
</code></pre></div><h2 id="_9-promise-any-提案"><a href="#_9-promise-any-提案" class="header-anchor">#</a> 9.Promise.any().(提案)</h2> <ul><li><code>Promise.any()</code>方法的参数使用跟<code>Promise.all()</code>方法时一样的。</li> <li>只有<code>p1</code>、<code>p2</code>、<code>p3</code>状态都变成<code>rejected</code></li> <li>只要<code>p1</code>、<code>p2</code>、<code>p3</code>之中有一个状态变成<code>fulfilled</code>,则<code>p</code>的状态就会发生改变。</li></ul> <div class="language- extra-class"><pre class="language-text"><code></code></pre></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最后一次修改时间:</span> <span class="time">9/28/2020, 11:37:23 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/blog/knowledge/css/css2.html" class="prev">
        CSS属性vertical-align详解
      </a></span> <span class="next"><a href="/blog/knowledge/js/es6/generator.html">
        Generator 函数
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/blog/assets/js/app.2a047d56.js" defer></script><script src="/blog/assets/js/2.cc145974.js" defer></script><script src="/blog/assets/js/19.1433c5a8.js" defer></script>
  </body>
</html>
